<form (ngSubmit)="save()" [formGroup]="form">
  <div fxLayout fxLayoutAlign="start center" mat-dialog-title>
    <span fxFlex>{{'PackageBoxType.MANUAL_APPEND'|translate}}</span>

    <button color="warn" mat-dialog-close mat-icon-button tabindex="-1" type="button">
      <mat-icon>close</mat-icon>
    </button>
  </div>

  <mat-dialog-content fxLayout="column">
    <div fxLayout fxLayoutGap="16px">
      <mat-form-field fxFlex="50">
        <input [matDatepicker]="budatPicker" [placeholder]="'PackageBox.budat'|translate" formControlName="budat" matInput required>
        <mat-datepicker-toggle [for]="budatPicker" matSuffix></mat-datepicker-toggle>
        <mat-datepicker #budatPicker></mat-datepicker>
        <mat-error *ngIf="form.get('budat').hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="50">
        <mat-select [compareWith]="compareWithId" [placeholder]="'packageClass'|translate" formControlName="budatClass" required>
          <mat-option *ngFor="let it of packageClasses$|async" [value]="it">
            {{it.name}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="form.get('budatClass').hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>
    </div>

    <div fxLayout fxLayoutGap="16px">
      <mat-form-field fxFlex="50">
        <mat-label>{{'batchNo'|translate}}</mat-label>
        <app-batch-input cdkFocusInitial formControlName="batch" matInput required></app-batch-input>
        <mat-hint *ngIf="batchCtrl.value" align="end">
          {{batchCtrl.value.product.name}} / {{batchCtrl.value.silkWeight}} / {{batchCtrl.value.tubeWeight}}
        </mat-hint>
        <mat-error *ngIf="batchCtrl.hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
        <mat-error *ngIf="batchCtrl.hasError('workshop')">
          {{batchCtrl.value.workshop.name}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="50">
        <mat-select [compareWith]="compareWithId" [placeholder]="'grade'|translate" formControlName="grade" required>
          <mat-option *ngFor="let it of grades$|async" [value]="it">
            {{it.name}}
          </mat-option>
        </mat-select>
        <mat-error *ngIf="gradeCtrl.hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>
    </div>

    <div fxLayout fxLayoutGap="16px">
      <mat-form-field fxFlex="33">
        <input [placeholder]="'silkCount'|translate" formControlName="silkCount" matInput required type="number">
        <mat-error *ngIf="silkCountCtrl.hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
        <mat-error *ngIf="silkCountCtrl.hasError('min')">
          {{'Validator.min'|translate:silkCountCtrl.getError('min')}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="33">
        <input [placeholder]="'netWeight'|translate" formControlName="netWeight" matInput readonly required tabindex="-1" type="number">
        <span matSuffix>KG</span>
        <mat-hint align="end">{{weightFormula?.netWeight}}</mat-hint>
        <mat-error *ngIf="netWeightCtrl.hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
        <mat-error *ngIf="netWeightCtrl.hasError('min')">
          {{'Validator.min'|translate:netWeightCtrl.getError('min')}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="33">
        <input [placeholder]="'grossWeight'|translate" [readonly]="form.value.grade?.sortBy>=100" formControlName="grossWeight" matInput required tabindex="1" type="number">
        <span matSuffix>KG</span>
        <mat-hint align="end">{{weightFormula?.grossWeight}}</mat-hint>
        <mat-error *ngIf="grossWeightCtrl.hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
        <mat-error *ngIf="grossWeightCtrl.hasError('min')">
          {{'Validator.min'|translate:grossWeightCtrl.getError('min')}}
        </mat-error>
      </mat-form-field>
    </div>

    <div fxLayout fxLayoutGap="16px">
      <mat-form-field fxFlex="33">
        <mat-select [placeholder]="'PackageBox.packageType'|translate" formControlName="packageType" required>
          <mat-option *ngFor="let it of packageTypes$|async" [value]="it">{{it}}</mat-option>
        </mat-select>
        <mat-error *ngIf="form.get('packageType').hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="33">
        <mat-select [placeholder]="'palletType'|translate" formControlName="palletType" required>
          <mat-option *ngFor="let it of palletTypes$|async" [value]="it">{{it}}</mat-option>
        </mat-select>
        <mat-error *ngIf="form.get('palletType').hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="33">
        <input [placeholder]="'palletCode'|translate" formControlName="palletCode" matInput>
      </mat-form-field>
    </div>

    <div fxLayout fxLayoutGap="16px">
      <mat-form-field fxFlex="50">
        <mat-select [placeholder]="'saleType'|translate" formControlName="saleType" required>
          <mat-option value="DOMESTIC">{{'SaleType.DOMESTIC'|translate}}</mat-option>
          <mat-option value="FOREIGN">{{'SaleType.FOREIGN'|translate}}</mat-option>
        </mat-select>
        <mat-error *ngIf="form.get('saleType').hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="50">
        <mat-select [compareWith]="compareWithId" [placeholder]="'PackageBox.sapT001l'|translate" formControlName="sapT001l" required>
          <mat-option *ngFor="let it of sapT001ls$|async" [value]="it">
            {{it.lgort}} [{{it.lgobe}}]
          </mat-option>
        </mat-select>
        <mat-error *ngIf="sapT001lCtrl.hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>
    </div>

    <div fxLayout fxLayoutGap="16px">
      <mat-form-field fxFlex="50">
        <mat-select [placeholder]="'foamType'|translate" formControlName="foamType" required>
          <mat-option *ngFor="let it of foamTypes$|async" [value]="it">{{it}}</mat-option>
        </mat-select>
        <mat-error *ngIf="form.get('foamType').hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
      </mat-form-field>

      <mat-form-field fxFlex="50">
        <input [placeholder]="'foamNum'|translate" formControlName="foamNum" matInput required type="number">
        <mat-error *ngIf="form.get('sapT001l').hasError('required')">
          {{'Validator.required'|translate}}
        </mat-error>
        <mat-error *ngIf="form.get('foamType').hasError('min')">
          {{'Validator.min'|translate:form.get('foamType').getError('min')}}
        </mat-error>
      </mat-form-field>
    </div>
  </mat-dialog-content>

  <mat-dialog-actions align="end">
    <button [disabled]="form.pristine||form.invalid" color="primary" mat-button>{{'Common.finish'|translate}}</button>
  </mat-dialog-actions>
</form>
